<template>
  <div>
    <van-cell-group inset class="L-margin-top-20" style="padding-bottom: 10px;">
      <van-tabs v-model:active="currentTab" class="L-margin-top-10">
        <van-tab title="场景" v-if="scenario.scenarioInfo?.length > 0" name="scenario"></van-tab>
        <van-tab title="动态" v-if="hasdynamic == 1" name="dynamics"></van-tab>
        <van-tab title="详情" name="detail"></van-tab>

        <!-- 其他 -->
        <van-tab v-for="(item, index) in relevant" :key="index" :title="item.title"
          :name="item.current_object"></van-tab>
      </van-tabs>


      <!--场景-->
      <div v-if="activeTab == 'scenario'">
        <ScenarioTab :scenario="scenario"></ScenarioTab>
      </div>
      <!--动态-->
      <div v-if="activeTab == 'dynamics'">
        <van-steps v-if="dynamicArr.length > 0" direction="vertical" :active="0" class="L-margin-top-20">
          <van-step v-for="(item, index) in dynamicArr" :key="index">
            <div class="L-small-text L-margin-bottom-20 L-bold-text">{{ item.date }}</div>
            <div class="L-margin-bottom-20" v-html="item.text"></div>
          </van-step>
        </van-steps>
        <div v-else>
          <van-empty description="没有数据" />
        </div>
      </div>

      <!-- 详情 -->
      <div v-show="activeTab == 'detail'">
        <DetailTab :detailsArr="detailsArr"></DetailTab>
        <div class="L-bottom-row" v-if="operation.length > 0"
          :style="{ justifyContent: operation.length == 1 ? 'center' : 'space-evenly' }">
          <template v-for="(item, index) in operation" :key="index">
            <div class="L-operate-btn" @click="handleClickOperation(item)" v-if="index < 2">{{ item.title }}</div>
          </template>

          <van-popover v-model:show="showPopover" placement="top-end" :actions="operationMoreActions"
            @select="handleClickOperation">
            <template #reference>
              <div v-if="operation.length > 2" class="L-operate-more-btn">
                <i class="iconfont icon-icon_more L-title"></i>
              </div>
            </template>
          </van-popover>
        </div>
      </div>

      <!-- 其他 -->
      <div v-for="(item, index) in relevant" :key="index" :title="item.title" :name="item.current_object">
        <CardList v-if="currentTab === item.current_object" :loadapi="item.current_object + '.list.do'"
          :loadparams="item" :index="index" :idobject="currentTab" :getBusinessMenus="getBusinessMenus"
          :itemid="itemid" :relObject="idobject">
          <template v-slot="slotProps">
            <CardItem :mode="mode" :idobject="currentTab" :item="slotProps.itemData"
              :handleShowDetail="handleShowDetail"></CardItem>
          </template>
        </CardList>
        <template v-if="currentTab === item.current_object">
          <van-floating-bubble v-if="item.cannew === '1'" icon="plus" axis="xy" magnetic="x" v-model:offset="offset"
            @click="handleRelAdd(item)" />
        </template>


      </div>

    </van-cell-group>

  </div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref, defineEmits, watch, computed } from "vue";
import CardList from "@/components/base//Card/CardList.vue";
import CardItem from "@/components/base/Card/CardItem.vue";
import DetailTab from "@/components/base/Detail/DetailTab.vue";
import ScenarioTab from "@/components/base/Scenario/ScenarioTab.vue";

const offset = ref({ x: -20, y: 440 });
const showPopover = ref(false);
const props = defineProps({
  itemid: {
    type: [String, Array],
    default: "",
  },
  idobject: {
    type: [String, Array],
    default: "",
  },

  mode: {
    type: String,
    default: "page",
  },
  activeTab: {
    type: String,
    default: "detail",
  },
  relevant: {
    type: Array,
    default: [],
  },
  hasdynamic: {
    type: Number,
    default: 0,
  },

  dynamicArr: {
    type: Array,
    default: [],
  },
  detailsArr: {
    type: Array,
    default: [],
  },
  operation: {
    type: Array,
    default: [],
  },
  operationMoreActions: {
    type: Array,
    default: [],
  },
  businessMenusArr: {
    type: Array,
    default: [],
  },
  scenario: {
    type: Object,
    default: {},
  },
  handleClickOperation: {
    type: Function,
    default: () => { },
  },
  handleChangeTab: {
    type: Function,
    default: () => { },
  },
  handleRelAdd: {
    type: Function,
    default: () => { },
  },
  handleShowDetail: {
    type: Function,
    default: () => { },
  },

  getBusinessMenus: {
    type: Function,
    default: () => { },
  },
});



const currentTab = ref("");

const isShowTabs = computed(() => {
  const { relevant, hasdynamic } = props;
  return relevant.length > 0 || hasdynamic === 1;
});

watch(() => props.activeTab, (newval) => {
  currentTab.value = props.activeTab;
});

watch(currentTab, (newval) => {
  props.handleChangeTab(newval);
});

interface relitem {
  cannew: string;

  current_object: string;

  current_toobject: string;

  current_toobjectid: string;

  display: string;

  relfield: string;

  relvalue: string;

  title: string;

  ui_key: string;

  view_id: string;
}

function handleClickOperation(item) {
  props.handleClickOperation(item);
}

function handleRelAdd(relitem: relitem) {
  props.handleRelAdd(relitem);
}
</script>


<style scoped></style>